<!--
    group: 发票管理
    name: 开票列表
    item: 撤销支付弹层
-->
<template>
  <a-modal
    :width="config.width"
    :footer="null"
    :title="config.modalTitle"
    :destroyOnClose="true"
    v-model="config.visible"
  >
    <div class="estimated">
      <h5>当前数据已绑定多个开票需求，请选择要继续结算的对象</h5>

      <!--单笔结算（预估费用）-->
      <h4 class="mTop">已绑定的开票申请：</h4>
      <a-table
        bordered  size="small"
        :rowKey="row => row.id"
        :row-selection="paySelection"
        :columns="columns"
        :data-source="bePaidData"
        :scroll="{y: 200}"
        :pagination="false"
      >
        <!--发票类型 1-专票 2-普票-->
        <span slot="taxType" slot-scope="text,record">
          <span v-if="text" :class="text === 1 ? 'd' : 'c'" style="margin-right: 5px">
            {{{1:'专票',2:'普票'}[text] || ''}}
          </span>
        </span>

      </a-table>

      <div class="desc_btn">
        <a-button @click="settleAccounts" class="large" type="primary">结算</a-button>
        <a-button
          :disabled="isButtonDisabled"
          @click="revokeAll"
          class="mLeft large"
          type="danger"
        >全部撤销</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { cloneObject, conversionElement } from '@/utils/util'
import { returnInvoicePayOrder } from '@api/invoiceAdminister'

export default {
  name: 'paymentRevocation',
  props:['config','payCheckList'],
  data(){
    return{
      // config: {
      //   width: '800px',
      //   visible: false,
      // },

      //待支付开票申请
      bePaidData: [],
      columns: [
        {
          title: '接票方',
          dataIndex: 'taxTitle',
          ellipsis: true,
          width: 230,
          align: 'center'
        },
        {
          title: '发票类型',
          dataIndex: 'taxType',
          width: 100,
          scopedSlots: {customRender: 'taxType'},
          align: 'center'
        },
        {
          title: '开票金额',
          dataIndex: 'amount',
          customRender: (text,record) => {
            if (text){
              return Math.round(text * 100)/10000 + '元'
            }
          },
          width: 120,
          align: 'center'
        },
      ],
      bePaidSelectedRows:[],  //待支付已选中数据

    }
  },
  watch: {
    'payCheckList': {
      handler(val){
        if (val && val.length > 0){
          this.bePaidData = cloneObject(val);
          this.bePaidSelectedRows = this.bePaidData;
        }
      },
      deep: true,
      immediate: true,  //初始值执行函数
    },
  },
  computed: {
    paySelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.bePaidSelectedRows = selectedRows;

          // 在这里可以根据selectedRows更新其他数据属性值
          this.updateDataProperty(selectedRows,this.bePaidData);
        },
        getCheckboxProps: record => {
          return {
            props: {
              defaultChecked: record.checkShow == true,
            }
          };
        },
      };
    },
    //判断全部撤销按钮是否可点击
    isButtonDisabled() {
      return this.bePaidSelectedRows.length != this.bePaidData.length;
    },
  },
  methods: {
    //结算
    settleAccounts(){
      if (this.bePaidSelectedRows.length > 0){
        //赋值选中数据
        this.config.payCheckList = this.bePaidData;
        //子组件调用父组件方法
        this.$emit('settlePayMethod',this.config);
      }else{
        this.$message.warning('请至少选择一项结算');
      }
    },
    //全部撤销
    revokeAll(){
      let payOrder = this.bePaidSelectedRows[0].payOrder;
      returnInvoicePayOrder(payOrder).then(res => {
        if (res.success) {
          if (res.result){
            this.$message.success('撤销成功');
            //子组件调用父组件方法
            this.$parent.cancelRevoke();
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //更新其他数据属性值---checkShow
    updateDataProperty(newList,oldList){
      if (newList.length > 0){
        //比对原数组和选中数组的id值 相同的赋值true
        for (let obj1 of oldList) {
          for (let obj2 of newList) {
            if (obj1.id == obj2.id) {
              // 假设我们想要更新name属性为value属性
              obj1.checkShow = true;
              break
            }else{
              obj1.checkShow = false;
            }
          }
        }
        return oldList
      }
    },
    //分转元
    conversion(num){
      return conversionElement(num);
    }
  }

}
</script>

<style scoped lang="less">
.mTop{
  margin-top: 30px;
}
.estimated{
  width: 100%;
  h5{
    //font-weight: bolder;
    font-size: 14px;
  }
}

.desc_btn{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 40px 0 20px 0;
  text-align: center;
}
.desc_btn a{
  margin-left: 10px;
  //text-decoration: underline;
}


.large{
  width: 276px;
  height: 44px;
  border-radius: 2px;
}
</style>
